import { useEffect, useReducer, useState } from 'react';
import { countsAPI, questionsListAPI, repairsListAPI, } from '../../apis/index/index';
import Chart from '../../components/Chart/index';
import './index.scss';
type ActionType = {
  type: 'counts' | 'repairs' | 'questions';
  payload?: any;
};

interface IItem {
  id: number;
  address: string;
  content: string;
}

const defaultIndexInfo = {
  counts: {
    houses: 0,
    notAnswer: 0,
    notFinishedRepairs: 0,
    questions: 0,
    repairs: 0,
    stores: 0,
    todayQuestions: 0,
    todayRepairs: 0,
    users: 0,
  },
  repairs: [] as IItem[],
  questions: [] as IItem[],
};

function indexInfoReducer(
  indexInfo: typeof defaultIndexInfo,
  action: ActionType
) {
  return {
    ...indexInfo,
    [action.type]: action.payload,
  };
}

const Index = () => {
  const [indexInfo, dispatch] = useReducer(indexInfoReducer, defaultIndexInfo);
  const [psize] = useState(5);
  useEffect(() => {
    getcountsAPI();
    getrepairsListAPI();
    getquestionsListAPI();
  }, []);
  //数据统计
  const getcountsAPI = async () => {
    const res = await countsAPI();
    dispatch({ type: 'counts', payload: res.data });
  };
  //待维修处理
  const getrepairsListAPI = async () => {
    const res = await repairsListAPI({ psize });
    dispatch({ type: 'repairs', payload: res.data.list });
  };
  //待投诉处理
  const getquestionsListAPI = async () => {
    const res = await questionsListAPI({ psize });
    dispatch({ type: 'questions', payload: res.data.list });
  };
  const { counts, repairs, questions } = indexInfo;

  return (
    <>
      <div id="index">
        <div className="indexMain">
          <div className="Statistics">
            <div className="el-card is-hover-shadow">
              <div className="el-card__body">
                <div className="title">
                  <span>数据统计</span>
                </div>
                <div className="text item">
                  <div className="shouyeleft">
                    <span>
                      房间总数：<span className="red">{counts.houses}</span>{' '}
                    </span>
                    <span>
                      居民总数：<span className="red">{counts.users}</span>{' '}
                    </span>
                    <span>
                      商店总数：<span className="red">{counts.stores}</span>{' '}
                    </span>
                  </div>
                  <div className="right">
                    <span>
                      报修总数：
                      <span>
                        {' '}
                        <span className="red">{counts.repairs}</span> 处
                      </span>{' '}
                    </span>
                    <span>
                      投诉总数：<span className="red">{counts.questions}</span>{' '}
                      <span>次</span>{' '}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="todayData">
            <div className="el-card is-hover-shadow">
              <div className="el-card__body">
                <div className="title">
                  <span>今日数据变动</span>
                </div>
                <div className="text item">
                  <div className="left">
                    <span>
                      {' '}
                      新增维修：
                      <span className="red">{counts.todayRepairs}</span>{' '}
                      <span>处</span>
                    </span>
                    <span>
                      {' '}
                      未处理报修：{' '}
                      <span className="red">
                        {counts.notFinishedRepairs}
                      </span>{' '}
                      <span>处</span>
                    </span>
                    <span>
                      {' '}
                      新增投诉：{' '}
                      <span className="red">{counts.todayQuestions}</span>{' '}
                      <span>次</span>
                    </span>
                    <span>
                      {' '}
                      未处理投诉：
                      <span className="red">{counts.notAnswer}</span>{' '}
                      <span>次</span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div>
            <Chart></Chart>
          </div>
        </div>
        <div className="indexAside">
          <div className="pendingRepair">
            <div className="el-card box-card is-always-shadow">
              <div className="el-card__body">
                <div className="title">
                  <span>待维修处理</span>
                  <ul>
                    {repairs.map((item: any, index) => (
                      <li key={item.id}>
                        {' '}
                        {index + 1 + '、'}{' '}
                        <span className="address">{item.address}：</span>
                        {item.content}
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            </div>
          </div>

          <div className="pendingRepair">
            <div className="el-card box-card is-always-shadow">
              <div className="el-card__body">
                <div className="title">
                  <span>待投诉处理</span>
                  <ul>
                    {questions.map((item: any, index) => (
                      <li key={item.id}>
                        {index + 1 + '、'}
                        <span className="address">{item.address}：</span>
                        {item.content}
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};
export default Index;
